<script setup>
    import { ref, reactive, toRaw } from 'vue'
    import { service, cache } from '@utils'
    import { ElMessage } from 'element-plus'

    const emit = defineEmits(['refresh'])

    const visible = ref(false)
    const formRef = ref()
    const maxInpNum = ref()
    const type = ref()
    const state = reactive({
        param: {}
    })

    const rules = {
        amount: [{ required: true, message: '请输入', trigger: 'blur' }]
    }

    const open = (item) => {
        state.param.orderId = item.orderId
        type.value = item.type
        visible.value = true
        if (item.type == 2) {
            if (item.maximumDepositFree > 0) {
                maxInpNum.value = item.deposit * 1 - item.freeDeposit * 1
            } else {
                maxInpNum.value = item.deposit
            }
        } else {
            maxInpNum.value = item.overDuePrice
        }
    }

    const close = () => {
        visible.value = false
        state.param = {}
    }

    const sure = async () => {
        formRef.value.validate((valid) => {
            if (valid) {
                realSubmit()
            }
        })
    }
    const realSubmit = async () => {
        const res =
            type.value == 1
                ? await service.bfqz.reduceOver(toRaw(state.param))
                : await service.bfqz.reduceDeposit(toRaw(state.param))
        if (res) {
            ElMessage.success(type.value == 1 ? '减免滞纳金金额成功' : '减免押金金额成功')
            close()
            let timeOut = setTimeout(() => {
                emit('refresh')
                clearTimeout(timeOut)
            }, 0)
        }
    }
    //把方法暴露给父组件
    defineExpose({
        open
    })
</script>

<template>
    <el-dialog
        v-model="visible"
        :title="type == 1 ? '减免滞纳金金额' : '减免押金'"
        center
        :close-on-click-modal="false"
        @close="close"
        destroy-on-close
        :width="450"
    >
        <section>
            <el-form
                :model="state.param"
                :rules="rules"
                ref="formRef"
                label-width="120px"
                label-suffix=":"
                onsubmit="return false;"
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            :label="type == 1 ? '滞纳金金额' : '押金金额'"
                            label-width="135px"
                        >
                            ¥{{ maxInpNum }}
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item
                    :label="type == 1 ? '减免滞纳金金额' : '减免押金金额'"
                    prop="amount"
                    label-width="135px"
                >
                    <el-input-number
                        v-model="state.param.amount"
                        :precision="2"
                        :controls="false"
                        placeholder="请输入金额"
                        style="width: 100%"
                        :min="0"
                        :max="maxInpNum"
                        clearable
                    />
                </el-form-item>
                <p style="text-align: center; color: #ff0000c7" v-if="type == 2">
                    注:押金只能减免一次
                </p>
            </el-form>
        </section>

        <template #footer>
            <span class="flex-align-end">
                <div class="margin-right20">
                    <el-button @click="close">取消</el-button>
                </div>
                <el-button type="primary" @click="sure">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<style scoped lang="scss">
    :deep(.el-input-number .el-input__inner) {
        text-align: left !important;
    }
</style>
